{% extends 'df_goods/base.html' %}
{% block head %}
    <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var $add_x = $('#add_cart').offset().top;
            var $add_y = $('#add_cart').offset().left;

            var $to_x = $('#show_count').offset().top;
            var $to_y = $('#show_count').offset().left;


            $('#add_cart').click(function () {
                //判断是否登录，若未登录则提示先登录
                if ($('.login_btn').text().indexOf('登录') >= 0) {
                    alert('请登录后再购买');
                    location.href = '/user/login/';
                    return;
                }


                const num = parseInt($('.num_show').val());
                $.get("/cart/add{{ g.id }}_" + num + "/", function (data) {
                    console.log(data);
                    //动画
                    $(".add_jump").css({'left': $add_y + 80, 'top': $add_x + 10, 'display': 'block'});
                    $(".add_jump").stop().animate(
                        {
                            'left': $to_y + 7,
                            'top': $to_x + 7
                        },
                        "fast", function () {
                            $(".add_jump").fadeOut('fast', function () {
                                $('#show_count').html(data.count);
                            });

                        });
                });
            });
            $('.add').click(add);
            $('.minus').click(minus);
            $('.num_show').blur(function () {
                const num = parseFloat($('.num_show').val());
                const price = parseFloat({{ g.gprice }});
                const total = num * price;
                $('.total em').text(total.toFixed(2) + '元');
            });

            function add() {
                const num = parseFloat($('.num_show').val());
                $('.num_show').val(num + 1);
                $('.num_show').blur();
            }

            function minus() {
                const num = parseFloat($('.num_show').val());
                if (num > 1)
                    $('.num_show').val(num - 1);
                $('.num_show').blur();
            }
        });
    </script>
{% endblock %}
{% block content %}
    <div class="goods_detail_con clearfix">
        <div class="goods_detail_pic fl"><img src="/media/{{ g.gpic }}" width="350" height="350"></div>

        <div class="goods_detail_list fr">
            <h3>{{ g.gtitle }}</h3>
            <p>{{ g.gjianjie }}</p>
            <div class="prize_bar">
                <span class="show_pirze">¥<em>{{ g.gprice }}</em></span>
                <span class="show_unit">单  位：{{ g.gunit }}</span>
            </div>
            <div class="goods_num clearfix">
                <div class="num_name fl">数 量：</div>
                <div class="num_add fl">
                    <input type="number" class="num_show fl" value="1">
                    <a href="javascript:;" class="add fr">+</a>
                    <a href="javascript:;" class="minus fr">-</a>
                </div>
            </div>
            <div class="total">总价：<em>{{ g.gprice }}元</em></div>
            <div class="operate_btn">
                <a href="javascript:;" class="buy_btn">立即购买</a>
                <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>
            </div>
        </div>
    </div>

{% endblock %}
{% block detail %}
    <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
            <li class="active">商品介绍</li>
            <li>评论</li>
        </ul>

        <div class="tab_content">
            <dl>
                <dt>商品详情：</dt>
                <dd>{{ g.gcontent|safe }}</dd>
            </dl>
        </div>

    </div>
    <div class="add_jump"></div>
{% endblock %}
